<template>
  <div >
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in goodsList" :key="item.id" :to="'/goods/detail/' + item.id">
          <div style="padding: 10px">
              <van-image width="100%" height="100%" :src="item.img_url" fit="contain"/>
            </div>
            <p class="titie">{{item.title}}</p>
            <div class="about">
              <div class="price">
                <span style="color: #ff0000; margin-right: 15px">{{'￥' + item.sell_price}}</span>
                <s style="font-size: 14px;color: #323233;">{{'￥' +item.market_price}}</s>
              </div>
              <div class="num">
                <span>热卖中</span>
                <span>剩{{item.stock_quantity}}件</span>
              </div>
            </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {
      goodsList: [],
      loading: false,
      finished: false,
      page: 1,
      refreshing: false
    }
  },
  created () {
  },
  methods: {
    onLoad () {
      this.$axios.get(`/api/getgoods?pageindex=${this.page}`).then((res) => {
        const data = res.data
        if (this.refreshing) {
          this.goodsList = []
          this.refreshing = false
        }
        this.goodsList.push(...data.message)
        if (data.status !== 0) return false
        this.loading = false
        if (data.message.length === 0) {
          this.finished = true
        } else {
          this.page++
        }
      })
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false
      // 重新加载数
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.page = 1
      this.onLoad()
    }
  },
  computed: {
  }
}
</script>

<style lang="less" scoped>

.van-pull-refresh{
  padding: 0 30px;
}

.van-list{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: space-around ;
}
.van-cell{
  width: 48%;
  margin-top: 15px;
  border: 1px solid #ccc;
  padding: 0 ;
  cursor: pointer;
}
.titie{
  box-sizing: border-box;
  font-size: 14px;
  padding:0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.about{
  box-sizing: border-box;
  height: 57px;
  width: 100%;
  background-color: #eee;
  padding: 10px;
}
.num{
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
</style>
